<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue3 render() 全功能示例</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp, reactive, h, watchEffect, resolveComponent } = Vue;

    // 响应式状态
    const state = reactive({
      showList: true,
      items: [
        { id: 1, name: '苹果', vote: 10 },
        { id: 2, name: '香蕉', vote: 5 },
        { id: 3, name: '橘子', vote: 8 }
      ]
    });

    // 子组件：列表项
    const ListItem = {
      props: ['item'],
      render() {
        return h('li', [
          h('span', `${this.item.id}. ${this.item.name} | 投票数: ${this.item.vote}`),
          h('button', {
            onClick: () => this.$emit('vote')
          }, '投票 +1')
        ]);
      }
    };

    // 父组件：列表 + 条件渲染 + 插槽
    const ListWrapper = {
      props: ['items'],
      emits: ['update-items'],
      render() {
        // v-if / v-else 替代
        if (!state.showList) {
          return h('p', '列表已隐藏');
        }

        // v-for 替代 + 自定义事件 + $event
        const listNodes = this.items.map(item =>
          h(ListItem, {
            item,
            onVote: () => {
              // 修复bug：通过事件更新父组件状态，而不是直接修改props
              const updatedItems = this.items.map(i =>
                i.id === item.id ? { ...i, vote: i.vote + 1 } : i
              );
              this.$emit('update-items', updatedItems);
            }
          })
        );

        return h('div', [
          // 命名插槽 header
          this.$slots.header ? this.$slots.header() : null,
          h('ul', listNodes),
          // 默认插槽
          this.$slots.default ? this.$slots.default() : null,
          // 命名插槽 footer
          this.$slots.footer ? this.$slots.footer() : null
        ]);
      }
    };

    // 创建应用
    const app = createApp({
      data() {
        return { state };
      },
      render() {
        return h(ListWrapper, {
          items: state.items,
          'onUpdate-items': (updatedItems) => {
            state.items = updatedItems;
          }
        }, {
          // 命名插槽 header
          header: () => h('h2', '水果投票列表'),
          // 默认插槽
          default: () => h('p', '请为你喜欢的水果投票'),
          // 命名插槽 footer
          footer: () => h('button', {
            onClick: () => state.showList = !state.showList
          }, state.showList ? '隐藏列表' : '显示列表')
        });
      }
    });

    app.mount('#app');

    // watchEffect 监听 state 变化
    watchEffect(() => {
      console.log('当前状态:', JSON.stringify(state));
    });
  </script>
</body>
</html>
